import React from 'react';
import Taro, { useDidShow, useRouter } from '@tarojs/taro';
import { connect } from 'react-redux';
import { View, Text, Image } from '@tarojs/components';
import pGo from '@/images/common/rightGray.png';
import './index.scss';
import Status from './status/index';
import Info from './info/index';
import BottomOperate from './bottomOperate/index';
import ProductInfoAfterSale from '../productInfo/index';

const Progress = ({ className = '' }) => {
  const goProgressDetail = () => {
    Taro.navigateTo({ url: '/orderSubPack/afterSale/applyProcess/index' });
  };
  return (
    <View className={'ProgressBox box2 ' + className}>
      <View className="flex-row-spaceBetween-center" onClick={() => goProgressDetail()}>
        <View className="txt32 blod">进度跟踪</View>
        <View className="flex-row-center-center">
          <Image className="arrow" src={pGo} />
        </View>
      </View>
    </View>
  );
};

//换货/退货：商家同意申请，待用户寄回，商家收货地址信息
const AddressInfo = ({ detail = {}, className = '' }) => {
  const { contact_name = '', contact_mobile = '', contact_address = '' } = JSON.parse(
    detail.contactAddress || '{}',
  );
  const handleCopy = (data) => {
    Taro.setClipboardData({
      data,
      complete: function () {
        Taro.showToast({ title: '复制成功', icon: 'none' });
      },
    });
  };
  return (
    <View className={'AddressInfo txt28 box2 ' + className}>
      <View className="flex-row">
        <View className="label">收货人</View>
        <View className="flex-row-spaceBetween-center right">
          <Text className="black085">{contact_name}</Text>
          <Text className="black085">{contact_mobile}</Text>
        </View>
      </View>
      <View className="mt16 flex-row">
        <View className="label">收货地址</View>
        <View className="black085 right">
          {contact_address}
          <View
            className="txt24 copy customePageStyle"
            onClick={() => {
              handleCopy(contact_address + '  ' + contact_name + '  ' + contact_mobile);
            }}
          >
            复制
          </View>
        </View>
      </View>
    </View>
  );
};

//换货/退货：待用户寄回商品
const Sendout = ({ id, className = '' }) => {
  const goWayBill = () => {
    Taro.navigateTo({ url: '/orderSubPack/afterSale/logisticsInput/index' });
  };
  return (
    <View className={'SendoutBox box2 ' + className}>
      <View className="flex-row-spaceBetween-center">
        <View className="txt32 blod">我已寄出</View>
        <View
          className="flex-row-center-center logisticsBtn customePageStyle customePageBorderStyle"
          onClick={() => goWayBill(id)}
        >
          填写单号
        </View>
      </View>
    </View>
  );
};

//换货/退货：用户已发货，等待商家收货，物流地址信息
const ToMerchantInfo = ({ detail = {}, className }) => {
  const { logisticsNameBuyer = '', logisticsNumBuyer = '' } = detail;
  const goWayBill = () => {
    Taro.navigateTo({ url: '/orderSubPack/afterSale/logisticsInput/index' });
  };
  return (
    <View className={'txt24 box2 ToMerchantInfo ' + className}>
      <View className="flex-row-spaceBetween-center">
        <View className="txt32 blod">进度跟踪</View>
        <View
          className="flex-row-center-center logisticsBtn customePageStyle customePageBorderStyle"
          onClick={() => goWayBill()}
        >
          修改物流
        </View>
      </View>
      <View className="mt16">
        <Text className="black05 label">快递公司</Text>
        <Text className="black085">{logisticsNameBuyer}</Text>
      </View>
      <View className="mt16">
        <Text className="black05 label">快递单号</Text>
        <Text className="black085">{logisticsNumBuyer}</Text>
      </View>
    </View>
  );
};

//换货：商家已发出换新货，物流地址信息
const ToUserInfo = ({ detail = {}, className = '' }) => {
  const { logisticsName, logisticsNum, name, mobile, refundAddress } = detail;
  return (
    <View className={'ToUserInfo txt24 box2 ' + className}>
      <View>
        <Text className="black05 label">物流公司</Text>
        <Text className="black085">{logisticsName}</Text>
      </View>
      <View className="mt16">
        <Text className="black05 label">发货单号</Text>
        <Text className="black085">{logisticsNum}</Text>
      </View>
      <View className="mt16 flex-row">
        <View className="black05 label">收货地址</View>
        <View className="black085">{name + '，' + mobile + '，' + refundAddress}</View>
      </View>
    </View>
  );
};

const MoneyInfo = ({ detail = {}, className = '' }) => {
  const { refundAmount } = detail;
  return (
    <View className={'infoBox box2 ' + className}>
      <View className="txt32 blod">退款明细</View>
      <View className="flex-row--center txt28 gray mt24">
        <Text className="label">支付</Text>
        <Text className="black085 bold">¥{refundAmount}</Text>
        <Text className="tip">（1-3个工作日到账）</Text>
      </View>
      <View className="flex-row--center txt28 gray mt24">
        <Text className="label">退回账户</Text>
        <Text className="black085">原路退回</Text>
      </View>
    </View>
  );
};

const BasicInfo = ({ detail = {}, className = '' }) => {
  const { mobile, orderId } = detail;
  return (
    <View className={'infoBox box2 ' + className}>
      <View className="txt32 blod">基本信息</View>
      <View className="flex-row--center txt28 gray mt24">
        <Text className="label">联系方式</Text>
        <Text className="black085">{mobile}</Text>
      </View>
      <View className="flex-row--center txt28 gray mt24">
        <Text className="label">订单编号</Text>
        <Text className="black085">{orderId}</Text>
      </View>
    </View>
  );
};

const EmptyLayout = () => {
  return <View className="EmptyLayout"></View>;
};

/*  kind: 1退款 2退货 3换货  */
/*  status:
    退款 1 2 3 9
    退货 1 3 4 5 6 9
    换货 1 3 4 5 6 7 8 9  
    1 售后申请待商家处理 默认状态
    2 退款审批通过 待退款
    3 退款/退货/换货审批未通过
    4 退货/换货审批通过，待买家退货/换货
    5 买家退货/换货，待商家收货
    6 商家拒绝收货，待买家处理
    7 商家收货，待商家寄出新货物
    8 商家已发货，待买家确认收货
    9 售后成功
    10 售后关闭（买家取消售后）
*/
const AdjustmentDetail = ({ dispatch, detail = {} }) => {
  const router = useRouter();
  const { params = {} } = router;
  const id = params.id;

  const getDetail = () => {
    dispatch({
      type: 'order/getAdjustmentDetailModel',
      payload: { id },
    });
  };
  useDidShow(() => {
    getDetail();
  }, []);

  return (
    <View className="ApplyDetail">
      <Status className="mt20" detail={detail} />
      {detail.status == 4 && <AddressInfo className="mt20" detail={detail} />}
      {detail.status == 4 && <Sendout className="mt20" id={detail.id} />}
      {detail.status == 5 && <ToMerchantInfo className="mt20" detail={detail} />}
      {detail.status == 8 && <ToUserInfo className="mt20" detail={detail} />}
      <Progress className="mt20" />
      <ProductInfoAfterSale
        className="mt20"
        product={detail.items ? detail.items : {}}
        title={detail.kind == 1 ? '退款商品' : detail.kind == 2 ? '退货商品' : '换货商品'}
      />
      {(detail.kind == 2 || detail.kind == 3) && <Info className="mt20" detail={detail} />}
      {detail.kind == 1 && <MoneyInfo className="mt20" detail={detail} />}
      {detail.kind == 1 && <BasicInfo className="mt20" detail={detail} />}
      <EmptyLayout />
      <BottomOperate detail={detail} handleOp={getDetail} />
    </View>
  );
};

export default connect(({ order }) => ({
  detail: order.adjustmentDetail,
}))(AdjustmentDetail);
